<template>
  <div class="app-container">
    <el-table
      :data="libsTableData"
      fit
      border
      highlight-current-row
      style="width: 100%;border-radius:8px;"
      :header-cell-style="{ background: '#F6F5FA', color: '#4E4F62' }"
      @sort-change="sortChange"
    >
      <el-table-column width="100px" type="index" label="序号" fixed align="center" />
      <el-table-column min-width="200px" prop="name" label="饰品名称" align="center" />
      <el-table-column min-width="200px" prop="price" label="饰品价格(币)" align="center" />
      <el-table-column min-width="200px" prop="winnerName" label="获奖者" align="center">
        <template slot-scope="scope">
          {{ filterName(scope.row.winnerId) }}
          <!-- <el-input v-if="scope.row.editMode" disabled style="max-width:170px" readonly :value="filterName(scope.row.winnerId)" />
          <el-select
            v-if="!scope.row.editMode"
            v-model="scope.row.winUserId"
            filterable
            remote
            disabled
            reserve-keyword
            placeholder="请输入昵称"
            :remote-method="remoteMethod"
            :loading="loading"
            @change="winnerSelect($event, scope.row)"
          >
            <el-option v-for="item in options" :key="item.lineId" :label="item.lineName" :value="item.lineId" />
          </el-select> -->
          <!-- <el-button v-show="scope.row.editMode" style="margin-left:10px" size="small" type="primary" @click="setEditMode(scope)">修改</el-button>
          <el-button v-show="scope.row.polish" style="margin-left:10px" size="small" type="primary" @click="determine(scope)">确定</el-button>
          <el-button v-show="!scope.row.polish" style="margin-left:10px; opacity: 0; cursor: default;" size="small" type="primary">确定</el-button>
          <el-button v-show="!scope.row.editMode" style="margin-left:10px; opacity: 0; cursor: default;" size="small" type="primary">修改</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="totalRows > 0" :total="totalRows" :page.sync="listQuery.pager.pageNo" :limit.sync="listQuery.pager.pageSize" @pagination="listGoodsData" />
  </div>
</template>
<script>
import { listGoodsData, getRollUsers, saveWinner } from '@/api/rules/listdata'

import Pagination from '@/components/Pagination' // secondary package based on el-pagination

export default {
  components: { Pagination },
  data() {
    return {
      libsTableData: [],
      rolluserdata: [],
      totalRows: 0,
      listQuery: {
        pager: {
          pageNo: 1,
          pageSize: 10,
          totalRows: '',
          start: ''
        },
        sort: '',
        direction: '',
        rollId: undefined
      },
      options: [],
      loading: false,
      polish: false
    }
  },

  created() {
    this.listGoodsData()
    this.getRollUsers()
  },
  methods: {
    setEditMode(scope) {
      scope.row.editMode = !scope.row.editMode
      scope.row.polish = true
    },

    filterName(id) {
      return this.rolluserdata.find(item => item.lineId == id)?.lineName
    },

    remoteMethod(query) {
      if (query !== '') {
        this.loading = true
        setTimeout(() => {
          this.loading = false
          this.options = this.rolluserdata.filter(item => {
            return item.lineName.toLowerCase().indexOf(query.toLowerCase()) > -1
          })
        }, 200)
      } else {
        this.options = []
      }
    },

    sortChange(column, prop, order) {
      this.listQuery.sort = column.prop
      if (column.order === 'ascending') {
        this.listQuery.direction = 'asc'
      } else if (column.order === 'descending') {
        this.listQuery.direction = 'desc'
      }
      this.listGoodsData()
    },
    listGoodsData() {
      this.listQuery.rollId = this.$route.query.id
      listGoodsData(this.listQuery).then(res => {
        this.$log(res)
        this.totalRows = res.data.totalRows
        const list = res.data.rows
        this.libsTableData = list.map(row => {
          return {
            ...row,
            editMode: !!row.winnerId,
            polish: false,
            winUserId: ''
          }
        })
        console.log(this.libsTableData)
        // this.libsTableData = res.data.rows
      })
    },
    // 参与人名单
    getRollUsers(id) {
      getRollUsers({ rollId: this.listQuery.rollId }).then(res => {
        this.$log(res, 'res')
        this.rolluserdata = res.data.data.list
      })
    },
    // 保存获奖者
    winnerSelect(value, row) {
      this.$log(value)
      saveWinner({ rollGoodId: row.id, userId: value }).then(res => {
        if (res.data.success) {
          this.$message.success('保存成功')
        } else {
          this.$message.error(res.data.msg)
        }
        this.listGoodsData()
      })
    },
    determine(scope) {
      saveWinner({ rollGoodId: scope.row.id, userId: null }).then(res => {
        if (res.data.success) {
          this.$message.success('保存成功')
        } else {
          this.$message.error(res.data.msg)
        }
        this.listGoodsData()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.el-select-dropdown__item {
	&.black {
		color: #000;
	}

	&.blue {
		color: blue;
	}

	&.purple {
		color: purple;
	}
}
</style>
